<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>彩票报告</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../css/timecheck.css" />
  <link rel="stylesheet" href="../fonts/iconfont.css" />
  <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
  </script>
  <style>
    html,
    body,
    #app {
      width: 100%;
      /*height: 100%;*/
      overflow-x: hidden;
      background-color: white;
    }
    body{
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;

    }
    /**/
    .formDiv{
      background-color: white;
    }
    .formDiv p{
      margin: 0;
      padding: 0;
      font-size: 0.24rem;
      color:black;
    }
    .formDiv>div{
      width:100%;
      overflow: hidden;
      padding: 0.1rem 4% 0.1rem 0;
    }
    .floatLeft{
      float: left;
    }

    .textLeft{
      text-align: left;
    }
    .textRight{
      text-align: right;
    }
    .bglight{
      background-color: #EEEEEE
    }
    .form-title{
      width: 100%;
      overflow: hidden;
      padding: 0.2rem 0.2rem 0.2rem 0;
      background-color: #EEEEEE;

    }
    .form-title p{
      float: left;
      text-align: center;
      padding: 0;
      margin: 0;
      color:black;
    }

    .userList{
      width: 100%;
      /*padding:0 0.1rem;*/
      background-color: white;
    }
    .userList>div{
      width: 100%;
      overflow: hidden;
      padding:  0.1rem;
      border-bottom: 1px solid #EEEEEE ;
    }
    .userInfo>div p{
      float: left;
      width: 33.33%;
      margin: 0;
      font-size: 0.2rem;
      padding: 0;
    }
    .userImg{
      width:0.8rem;
      height: 0.8rem;
      border-radius: 0.4rem;
      margin-right: 0.1rem;
      overflow: hidden;
    }
    .userInfo{
      width: 5rem;
    }
    .userImg img{
      width: 0.8rem;
    }
    .textLeft{
      text-align: left;
    }
    .textRight{
      text-align: right;
    }
    .floatLeft{
      float: left;
    }

  </style>
</head>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js"></script>
<script src="../common/timeCheck3.js" type="text/javascript" charset="utf-8"></script>

<body>
<div id="app" class="mui-content">
  <div class="mui-scroll-wrapper">
    <div class="mui-scroll" >
      <time-check :type='2' :dateType="dateType" :names='names' :leftdata="leftdata" :rightdata="rightdata" :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>

      <div style="overflow: hidden;background-color: white;margin-bottom: 1rem;padding-top: 0.5rem;border-top: 1px solid #ccc ">
        <!--<div class="form-title">-->
          <!--<p style="width: 40%">设备名</p>-->
          <!--<p style="width: 30%;text-align: right">人数</p>-->
          <!--<p style="width: 30%;text-align: right">分数</p>-->
        <!--</div>-->
        <div class="userList">
          <div v-show="list.length !==0" v-for="(item,index) in list"  :class="{bglight:index%2===0}">
            <div class="userImg floatLeft">
              <img src="../images/defaultPhoto.png" alt="">
            </div>
            <div class="userInfo floatLeft">
              <div style="overflow: hidden">
                <p class="userName">{{item.userName}}</p>
                <p  class="textRight"  style="float: right">{{new Date(item.logTime).format('yyyy-MM-dd')}}</p>
              </div>
              <div style="overflow: hidden">
                <p style="color:black">{{item.type === 1 ? 'ID' : '卡号' }}：{{item.userId}}</p>
                <p style="text-align: center">+{{item.scoreCount}}</p>
                <p class="textRight">{{new Date(item.logTime).format('hh:mm:ss')}}</p>
              </div>

            </div>
          </div>
          <p v-show="list.length === 0" style="width: 100%;text-align: center">暂无数据</p>
        </div>
      </div>
    </div>
  </div>


</div>
<!---->
<script src="../config.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: function() {
      return {
        names: {
          leftName: '存票人数',
          rightName: '存票分数'
        },
        fromDate: '',
        toDate: '',
        actnum: 0,
        top:'1rem',
        dateType:'',
        leftdata:0,
        rightdata:0,
        list:[],
        currentShopObj:'',
        pageNo:1,
        pageCount:20,
        pageTotal:1,
        isLoading:false,
      }
    },
    created: function() {
      var vm = this
      mui.init()
      mui.plusReady(function() {
        vm.receiveParams()
        vm.initTime()
      })
    },
    mounted:function(){
      this.bindEvent()
    },
    methods: {
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
      },
      localData:function() {
        var  vm=this
        vm.isLoading=true
        var data={
          "storeId":vm.currentShopObj.storeId,
          "fromTime":  new Date(vm.fromDate+ ' 00:00:00').getTime() ,
          "endTime":new Date(vm.toDate+ ' 23:59:59' ).getTime(),
          "pageNo":vm.pageNo,
          "pageCount":vm.pageCount,
        };
        console.log(JSON.stringify(data))
        config.ajax({
          url:'/scores/getScoreNewFlows',
          data: {
            "storeId":vm.currentShopObj.storeId,
            "fromTime":  new Date(vm.fromDate+ ' 00:00:00').getTime() ,
            "endTime":new Date(vm.toDate+ ' 23:59:59' ).getTime(),
            "pageNo":vm.pageNo,
            "pageCount":vm.pageCount,
          },
          success: function(res) {
            console.log(JSON.stringify(res))
            if(res.result===1){
              if(res.scoreLogNewFlows !==null){
                vm.pageNo=res.scoreLogNewFlows.pageNo;
                vm.pageCount=res.scoreLogNewFlows.pageCount;
                vm.pageTotal=Math.ceil(res.scoreLogNewFlows.totalCount/vm.pageCount);
                console.log(vm.pageTotal)
                vm.leftdata=res.scoreLogNewFlows.totalPeopleNum;
                vm.rightdata=res.scoreLogNewFlows.totalScore;
                if(vm.pageNo ===1){
                  vm.list=res.scoreLogNewFlows.scoreLogNewFlows;
                }else if(vm.pageNo >1){
                  vm.list=(vm.list).concat(res.scoreLogNewFlows.scoreLogNewFlows)
                }
              }else{
                vm.list=[];
                vm.leftdata=0;
                vm.rightdata=0;
              }


            }else{
              mui.toast(res.errormsg);
            }
            setTimeout(function () {
              vm.isLoading = false
            }, 500)
          },
          error:function(res){
            mui.toast(res.errormsg);
            setTimeout(function () {
              vm.isLoading = false
            }, 500)
          }
        });
      },
      initTime: function() {
        //						默认时间为日
        this.date = new Date()
        this.fromDate=new Date(this.date).format('yyyy-MM-dd')
        this.toDate = new Date(this.date).format('yyyy-MM-dd')
      },
      bindEvent:function(){
        var  vm=this;
        mui('.mui-scroll-wrapper').scroll({
          scrollY: true,
          bounce: true,
          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
        });
        //滚动监听
        document.querySelector('.mui-scroll-wrapper').addEventListener('scrollend', function (e) {
          if (e.detail.y <= e.detail.maxScrollY) {
            if (vm.isLoading === false) {
              vm.pageNo +=1;
              if (vm.pageNo <= vm.pageTotal) {
//                  vm.loadingText = '加载中...';
                vm.localData();
              } else {
                vm.pageNo=vm.pageTotal;
                mui.toast('没有更多');
              }
            }
          };

        });
      }

    },
    watch: {
      fromDate: function() {
        this.localData()
      }
    }
  })
</script>
</body>

</html>